<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
//引入onLoad
import { onLoad, onReady } from '@dcloudio/uni-app'
//引入icon-返回组件
import iconBackto from '@/components/icon-backto/index.vue'
//引入upload组件
import itemUpload from '@/components/upload/index.vue'
// 上传图片视频组件请求头
import getheader from '@/apis/img-header'
//引入时间段组件
import timeslot from '@/components/timeslot/index.vue'
// 请求头信息
//引入时间段数据
import { list } from './components/datalist'
//引入api 获取商铺的信息
import { getshopinfo, dataType, postsettings } from '@/apis/mall/settings/index'
//底部安全距离
import bottomSafe from '@/components/bottomsafe/index.vue'
interface FormType {
    name: string
    logo: string
    contractNumber: string
    newTips: string
    start: string
    end: string
    briefing: string
}

//表单数据
const form = reactive<FormType>({
    name: '',
    logo: '',
    contractNumber: '',
    newTips: '',
    start: '开始时间',
    end: '结束时间',
    briefing: '',
})
//表单验证规则
const formRules = reactive({
    name: [
        {
            required: true,
            message: '请输入姓名',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change'],
        },
    ],
    logo: [
        // 自定义规则判断logo是否为空
        {
            validator: (rule: any, value: any, callback: any) => {
                if (value.length === 0) {
                    callback(new Error('请上传logo'))
                } else {
                    callback()
                }
            },
            trigger: ['change'],
        },
    ],
    contractNumber: [
        {
            required: true,
            message: '请输入联系方式',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change'],
        },
        //判断只能是手机号
        {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号',
            transform(value: any) {
                return String(value)
            },
        },
        //判断长度
        {
            min: 11,
            max: 11,
            message: '请输入正确的手机号',
            trigger: ['change'],
        },
    ],
    newTips: [
        {
            required: true,
            message: '请输入上线文案',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change'],
        },
    ],
    briefing: [
        {
            required: true,
            message: '请输入店铺简介',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change'],
        },
    ],
    start: [
        {
            required: true,
            message: '请选择开始时间',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change'],
        },
    ],
})
//获取表单组件
const shopForm = ref()
//时间选择的参数 用于判断是开始时间还是结束时间
const timeSelector = ref('')
//基础路径
const baseUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_UPLOAD_URL
//控制时间段弹窗
const show = ref(false)
//时间段数据

//定义商铺信息
const shopInfo = reactive<{ data: dataType }>({
    data: {} as dataType,
})
//表单label样式
const labelStyle = {
    color: 'rgba(153, 153, 153, 1)',
    'font-size': '24rpx',
    'padding-left': '16rpx',
    'line-height': '32rpx',
}

onLoad(() => {
    uni.$emit('updateTitle')
    //获取商铺信息
    handleGetShopInfo()
})
onReady(() => {
    shopForm.value.setRules(formRules)
})

/**
 * 图片上传成功回调
 */
const imgList = ref<string[]>([])

const handleSuccess = (e: any) => {
    imgList.value.push(e)
    console.log(e)
    // imgList.value = res
    // if(formData.value.imglist.length>0){
    //     formData.value.imglist += e
    // }
}
/**
 * 选择时间回调
 */
const confirm = (res: any) => {
    if (timeSelector.value === 'start') {
        // res是一个数组 每一项的label值是时间段 00 把每一项label值拼接起来成为一个字符串 00:00:00
        form.start = res.map((item: any) => item.label).join(':')
    } else {
        form.end = res.map((item: any) => item.label).join(':')
    }
}
const handleOpen = (res: string) => {
    show.value = true
    timeSelector.value = res
}
/**
 * 保存表单并且提交
 */
const handleSaveForm = async () => {
    console.log(111111111111111)
    shopForm.value.validate((valid: boolean) => {
        if (valid) {
            console.log('验证通过')
            handleSetShopInfo()
        } else {
            console.log('验证失败')
        }
    })
}
//发送请求获取商铺基本信息
const handleGetShopInfo = async () => {
    const data = await getshopinfo()
    console.log(data, 11111111111)
    //如果请求成功 code200
    if (data.code === 200) {
        form.name = data.data.name
        form.contractNumber = data.data.contractNumber
        form.newTips = data.data.newTips
        form.start = data.data.start ? data.data.start : '开始时间'
        form.end = data.data.end ? data.data.end : '结束时间'
        form.briefing = data.data.briefing
        form.logo = data.data.logo
        imgList.value.push(data.data.logo)
    }
}
//发送请求保存商铺信息
const handleSetShopInfo = async () => {
    console.log(1) //如果form.logo是一个数组 就把数组中第一项的url赋值给form.logo
    if (Array.isArray(form.logo)) {
        form.logo = form.logo[0]
    }
    console.log(form)
    const data = await postsettings({ ...form, companyName: form.name })
    if (data.code === 200) {
        uni.showToast({
            title: '保存成功',
            icon: 'none',
        })
        uni.switchTab({
            url: '/pages/user/index',
        })
    } else {
        uni.showToast({
            title: '保存失败',
            icon: 'none',
        })
    }
}

//删除预览图片
const handleDelete = (res: any) => {
    // imgList.value = []
    // form.logo = ''
    console.log(res)
    imgList.value = imgList.value.filter((item) => {
        return item !== res.del
    })
}
// onMounted(() => {
//     safariHacks()
// })
// function safariHacks() {
//     let windowsVH = window.innerHeight / 100
//     document.querySelector('.content').style.setProperty('--vh', windowsVH + 'px')
//     window.addEventListener('resize', function () {
//         document.querySelector('.content').style.setProperty('--vh', windowsVH + 'px')
//     })
// }
</script>

<template>
    <view class="content">
        <scroll-view class="contentone" :scroll-y="true">
            <view class="content__top">
                <icon-backto :type="2" :url="'/pages/user/index'"></icon-backto>
            </view>
            <view class="content__tableList">
                <view style="height: 42rpx"></view>
                <u-form ref="shopForm" :model="form" label-position="top" :label-style="labelStyle" :border-bottom="false">
                    <u-form-item class="content__tableList--item" prop="name" label="店铺名称" :border-bottom="false">
                        <u-input v-model="form.name" class="content__tableList--one" :height="60" />
                    </u-form-item>
                    <u-form-item class="content__tableList--item" prop="logo" label="店铺LOGO" :border-bottom="false">
                        <item-upload
                            v-model="form.logo"
                            :action="baseUrl"
                            :imglist="imgList"
                            :maxleng="1"
                            :headers="getheader()"
                            :choosenum="1"
                            :choosetype="'img'"
                            @upload-success="handleSuccess"
                            @img-delete="handleDelete"
                        ></item-upload>
                    </u-form-item>
                    <u-form-item class="content__tableList--item" prop="contractNumber" label="联系方式" :border-bottom="false">
                        <!-- <label class="content__tableList--label">联系方式</label> -->
                        <u-input v-model="form.contractNumber" class="content__tableList--one" :height="60" />
                    </u-form-item>
                    <u-form-item class="content__tableList--item" prop="start" label="营业时间" :border-bottom="false">
                        <view class="content__tableList--selec">
                            <u-icon name="clock" color="#C1C2C5" size="32"></u-icon>
                            <view id="1" class="content__tableList--start" @click="($event) => handleOpen('start')">{{ form.start }}</view>
                            至
                            <view id="2" class="content__tableList--start" @click="($event) => handleOpen('end')">{{ form.end }}</view>
                        </view>
                        <timeslot v-model="show" mode="mutil-column" :list="list" @confirm="confirm"></timeslot>
                    </u-form-item>
                    <u-form-item class="content__tableList--item" prop="newTips" label="上线文案" :border-bottom="false">
                        <!-- <label class="content__tableList--label">上线文案</label> -->
                        <u-input
                            v-model="form.newTips"
                            class="content__tableList--one"
                            :type="'textarea'"
                            :auto-height="false"
                            style="height: 106rpx"
                            :maxlength="60"
                        />
                    </u-form-item>
                    <u-form-item class="content__tableList--item" prop="briefing" label="店铺介绍" :border-bottom="false">
                        <!-- <label class="content__tableList--label">店铺介绍</label> -->
                        <u-input
                            v-model="form.briefing"
                            class="content__tableList--one"
                            :type="'textarea'"
                            :auto-height="false"
                            style="height: 106rpx"
                            :maxlength="60"
                        />
                    </u-form-item>
                </u-form>
                <view class="content__bottom" @click="handleSaveForm">
                    <view class="content__bottom--btn">
                        <u-icon name="huidaodingbu" custom-prefix="icon" class="iconfont" size="48" color="#4755E9"></u-icon>
                        <view>保存</view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<style lang="scss" scoped>
@include b(contentone) {
    height: 1334rpx;
}
@include b(content) {
    height: 100%;
    display: flex;
    flex-direction: column;
    @include e(top) {
        height: 202rpx;
        padding: 80rpx 0 39rpx 16rpx;
    }
    @include e(tableList) {
        width: 100vw;
        border-radius: 50rpx 50rpx 0 0;
        background-color: rgba(252, 252, 252, 1);
        color: #101010;
        @include m(start) {
            width: 280rpx;

            color: rgba(196, 199, 207, 1);
            text-align: center;
        }
        @include m(bottom) {
            color: rgba(196, 196, 196, 1);
            font-size: 24rpx;
            margin-top: 18rpx;
        }
        @include m(item) {
            margin: 0 22rpx 42rpx 34rpx;
        }
        @include m(label) {
            color: rgba(153, 153, 153, 1);
            font-size: 24rpx;
            padding-left: 16rpx;
        }

        @include m(one) {
            margin-top: 8rpx;
            width: 694rpx;
            // height: 60rpx;
            border-radius: 16rpx;
            color: rgba(51, 51, 51, 1);
            font-size: 24rpx;
            text-align: left;
            font-family: Microsoft Yahei;
            border: 2rpx solid rgba(212, 216, 255, 1);
            text-indent: 20rpx;
        }
        @include m(selec) {
            margin-top: 20rpx;
            width: 694rpx;
            height: 60rpx;
            border-radius: 16rpx;
            color: rgba(51, 51, 51, 1);
            font-size: 24rpx;
            text-align: left;
            font-family: Microsoft Yahei;
            border: 2rpx solid rgba(212, 216, 255, 1);
            text-indent: 20rpx;
            display: flex;
            align-items: center;
            font-size: 24rpx;
        }
    }
    @include e(bottom) {
        background-color: rgba(255, 255, 255, 1);
        height: 140rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        @include m(btn) {
            width: 144rpx;
            height: 78rpx;
            border-radius: 20rpx;
            background-color: rgba(232, 234, 255, 1);
            color: #4755e9;
            font-size: 28rpx;
            border: 2rpx solid rgba(212, 216, 255, 1);
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-right: 44rpx;
        }
    }
}
:deep(.u-form-item--right__content__slot) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
</style>
